<template>
	<div class="unified-board">
		<!-- Tab 标签移到顶部 -->
		<div class="board-tabs">
			<div v-for="tab in tabs" :key="tab.key" :class="['tab-item', { active: activeTab === tab.key }]" @click="switchTab(tab.key)">
				<el-icon class="tab-icon">
					<component :is="tab.icon" />
				</el-icon>
				<span class="tab-title">{{ tab.title }}</span>
				<span v-if="tab.count > 0" class="tab-count">{{ tab.count }}</span>
			</div>
		</div>

		<!-- Tab 内容区域 -->
		<div class="board-content">
			<!-- 通知公告 -->
			<div v-show="activeTab === 'announcement'" class="tab-panel">
				<AnnouncementBoard :showAllCategories="true" :max-count="8" @announcement-count="handleAnnouncementCount" />
			</div>

			<!-- 招聘公告 -->
			<div v-show="activeTab === 'recruitment'" class="tab-panel">
				<RecruitmentBoard :external-only="true" @recruitment-count="handleRecruitmentCount" />
			</div>

			<!-- 帮助文档 -->
			<div v-show="activeTab === 'help'" class="tab-panel">
				<HelpDocumentBoard :max-count="6" @document-count="handleDocumentCount" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { Bell, Briefcase, Help } from '@element-plus/icons-vue';
import AnnouncementBoard from './AnnouncementBoard.vue';
import RecruitmentBoard from './RecruitmentBoard.vue';
import HelpDocumentBoard from './HelpDocumentBoard.vue';

// Props
const props = defineProps({
	defaultTab: {
		type: String,
		default: 'announcement',
	},
});

// Emits
const emit = defineEmits(['tab-change', 'total-count']);

// 响应式数据
const activeTab = ref(props.defaultTab);
const announcementCount = ref(0);
const recruitmentCount = ref(0);
const documentCount = ref(0);

// Tab 配置
const tabs = computed(() => [
	{
		key: 'announcement',
		title: '通知公告',
		icon: Bell,
		count: announcementCount.value,
	},
	{
		key: 'recruitment',
		title: '招聘公告',
		icon: Briefcase,
		count: recruitmentCount.value,
	},
	{
		key: 'help',
		title: '帮助文档',
		icon: Help,
		count: documentCount.value,
	},
]);

// 总计数
const totalCount = computed(() => {
	return announcementCount.value + recruitmentCount.value + documentCount.value;
});

// 方法
const switchTab = (tabKey) => {
	activeTab.value = tabKey;
	emit('tab-change', tabKey);
};

const handleAnnouncementCount = (count) => {
	announcementCount.value = count;
	emitTotalCount();
};

const handleRecruitmentCount = (count) => {
	recruitmentCount.value = count;
	emitTotalCount();
};

const handleDocumentCount = (count) => {
	documentCount.value = count;
	emitTotalCount();
};

const emitTotalCount = () => {
	emit('total-count', totalCount.value);
};

// 生命周期
onMounted(() => {
	emit('tab-change', activeTab.value);
});
</script>

<style scoped>
.unified-board {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.board-content {
	flex: 1;
	background: var(--el-bg-color);
	border: 1px solid var(--el-border-color-light);
	border-top: none;
	border-radius: 0 0 8px 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.tab-panel {
	flex: 1;
	overflow: auto;
	padding: 16px;
}

/* Tab 标签顶部 */
.board-tabs {
	display: flex;
	background: var(--el-bg-color-page);
	border-radius: 8px 8px 0 0;
	padding: 4px;
	margin-bottom: 0;
	border: 1px solid var(--el-border-color-light);
	border-bottom: none;
}

.tab-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--el-text-color-regular);
	font-size: 14px;
	font-weight: 500;
	position: relative;
	background: transparent;
}

.tab-item:hover {
	background: var(--el-color-primary-light-9);
	color: var(--el-color-primary);
}

.tab-item.active {
	background: var(--el-color-primary);
	color: white;
	box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.tab-icon {
	font-size: 16px;
	flex-shrink: 0;
}

.tab-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tab-count {
	min-width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	padding: 0 6px;
}

.tab-item:not(.active) .tab-count {
	background: var(--el-color-primary-light-7);
	color: var(--el-color-primary);
}

/* Tab 内容区域 */
.board-content {
	flex: 1;
	background: white;
	border: 1px solid var(--el-border-color-light);
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.tab-panel {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	padding: 16px;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--el-border-color) transparent;
	scroll-behavior: smooth;
	position: relative;
}

/* Tab面板滚动条样式 - 优化版 */
.tab-panel::-webkit-scrollbar {
	width: 6px;
}

.tab-panel::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 3px;
}

.tab-panel::-webkit-scrollbar-thumb {
	background: var(--el-border-color-light);
	border-radius: 3px;
	transition: all 0.2s ease;
}

.tab-panel::-webkit-scrollbar-thumb:hover {
	background: var(--el-border-color);
	width: 8px;
}

/* 滚动时显示更明显的滚动条 */
.tab-panel:hover::-webkit-scrollbar-thumb {
	background: var(--el-border-color);
}

/* 移动端优化滚动 */
.tab-panel {
	-webkit-overflow-scrolling: touch;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.tab-item {
		padding: 8px 6px;
		font-size: 13px;
	}

	.tab-title {
		display: none;
	}

	.tab-icon {
		font-size: 18px;
	}

	.tab-panel {
		padding: 12px;
	}
}

@media (max-width: 480px) {
	.board-tabs {
		padding: 2px;
		margin-bottom: 0;
	}

	.tab-item {
		padding: 6px 4px;
		gap: 4px;
	}

	.tab-count {
		min-width: 16px;
		height: 16px;
		font-size: 11px;
		padding: 0 4px;
	}

	.tab-panel {
		padding: 8px;
	}
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
	.board-tabs {
		background: var(--el-bg-color-overlay);
		border-color: var(--el-border-color);
	}

	.board-content {
		background: var(--el-bg-color);
		border-color: var(--el-border-color);
	}

	.tab-item:hover {
		background: var(--el-color-primary-dark-2);
	}
}
</style>
